<template>
  <div class="rule pad">
    <div class="head">
      <span>健康评测规则设置</span>
      <el-button @click="openRuleDialog" type="primary" circle icon="el-icon-plus"></el-button>
    </div>
    <el-table border class="m-t-b" stripe :data="rules" v-loading="loading">
      <el-table-column label="年龄区间">
        <template slot-scope="scope">
          {{scope.row.startAge + '岁 - ' + scope.row.endAge + '岁'}}
        </template>
      </el-table-column>
      <el-table-column label="规则名称">
        <template slot-scope="scope">
          {{ruleNames[scope.row.type - 1].label}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="goDetail(scope.row)" type="default" circle icon="el-icon-view"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      :current-page="curPage"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
    <el-dialog title="添加评测规则" :visible.sync="showRuleDialog">
      <el-form :model="rule" label-position="top">
        <el-form-item label="年龄区间(拖动滑块选择)">
          <div class="age-area">
            <el-input style="width: 120px;" v-model="rule.ageSection[0]" readonly>
              <span slot="append">岁</span>
            </el-input>
            <span style="padding: 0 20px;">-</span>
            <el-input style="width: 120px;" v-model="rule.ageSection[1]" readonly>
              <span slot="append">岁</span>
            </el-input>
          </div>
          <div>
            <el-slider
              v-model="rule.ageSection"
              range
              show-stops
              :max="100">
            </el-slider>
          </div>
        </el-form-item>
        <el-form-item label="规则名称">
          <el-select v-model="rule.name">
            <el-option v-for="(item, i) in ruleNames" :key="i" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideRuleDialog">取 消</el-button>
        <el-button type="primary" @click="addRule">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { notifySuccess } from '../util'
import {
  getHealthRuleList,
  addHealthRule
} from '../api'

export default {
  name: 'rule',
  data () {
    return {
      showRuleDialog: false,
      pageSize: 10,
      loading: true,
      curPage: 1,
      total: 0,
      rules: [],
      rule: {
        ageSection: [0, 5],
        name: 1
      },
      ruleNames: [
        { value: 1, label: 'Z评分设置' },
        { value: 2, label: '结果症状设置' },
        { value: 3, label: '缺乏症设置' }
      ]
    }
  },
  methods: {
    goDetail (data) {
      if (!this.$checkAuth('canSeeTestRule')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.$router.push(`/test/rule/${data.type}/${data.evaluationSettingId}/${data.endAge}/${data.startAge}`)
    },
    hideRuleDialog () {
      this.showRuleDialog = false
    },
    handlePagi (page) {
      this.fetchHealthRuleList(page)
    },
    addRule () {
      let similarRule = this.rules.filter(item => item.type === this.rule.name);
      for (let i = 0; i < similarRule.length; i ++) {
        let cur = similarRule[i]
        if (this.rule.ageSection[1] <= cur.startAge || this.rule.ageSection[0] >= cur.endAge) {
          continue
        } else {
          return this.$message.error('此年龄区间的同类规则设置已存在! 请勿重复设置')
        }
      };
      addHealthRule({
        type: this.rule.name,
        startAge: this.rule.ageSection[0],
        endAge: this.rule.ageSection[1]
      })
      .then(res => {
        if (res.data.code === 1) {
          notifySuccess(this)
          this.showRuleDialog = false
          this.fetchHealthRuleList(1)
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
      })
      .catch(e => {
        this.$message.error('网络异常!')
      })
    },
    openRuleDialog () {
      if (!this.$checkAuth('canAddTestRule')) {
        return this.$message.error('暂无对应操作权限!')
      };
      this.showRuleDialog = true
    },
    fetchHealthRuleList (index) {
      this.loading = true
      getHealthRuleList({
        index,
        count: this.pageSize,
        // queryParam: {
        //   isPay: 1, // 1支付0未支付
        //   isDifficult: 1 //是否是疑难病症1是0不是
        // }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.total = res.data.data.totalRecord
          this.rules = res.data.data.list || []
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading = false
      })
      .catch(e => {
        this.loading = false
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchHealthRuleList(1)
  }
}
</script>
<style lang="scss">
.rule {
  table {
    .cell {
      text-align: center;
    }
  }
  .age-area {
    display: flex;

  }
}
</style>
